const modal = function(options) {
  const defaults = {
    title: '提示', // 模态框标题
    content: '', // 模态框内容
    width: '500px', // 模态框宽度
    height: '200px', // 模态框高度
    cancelBtn: true, // 是否显示取消按钮
    confirmBtn: true, // 是否显示确认按钮
    cancelText: '取消', // 取消按钮文本
    confirmText: '确认', // 确认按钮文本
    cancelCallback: function() {}, // 取消按钮回调函数
    confirmCallback: function() {} // 确认按钮回调函数
  }
  const settings = Object.assign({}, defaults, options);

  // 生成模态框HTML
  let modalHtml = '<div class="modal-mask"></div><div class="modal-box" style="width: ' +
      settings.width + '; height: ' + settings.height + '"><div class="modal-title">' +
      settings.title + '</div><div class="modal-content">' + settings.content
      + '</div><div class="modal-btn-group">';
  if (settings.cancelBtn) {
    modalHtml += '<button class="btn btn-cancel btn-bg">' + settings.cancelText + '</button>';
  }
  if (settings.confirmBtn) {
    modalHtml += '<button class="btn btn-submit btn-bg">' + settings.confirmText + '</button>';
  }
  modalHtml += '</div></div>';

  // 显示模态框
  const modalEle = document.createElement('div');
  modalEle.innerHTML = modalHtml;
  document.body.appendChild(modalEle);

  // 取消按钮点击事件
  const cancelBtn = modalEle.querySelector('.btn-cancel');
  if (cancelBtn) {
    cancelBtn.addEventListener('click', function() {
      settings.cancelCallback && settings.cancelCallback();
      document.body.removeChild(modalEle);
    });
  }

  // 确认按钮点击事件
  const confirmBtn = modalEle.querySelector('.btn-submit');
  if (confirmBtn) {
    confirmBtn.addEventListener('click', function() {
      settings.confirmCallback && settings.confirmCallback();
      document.body.removeChild(modalEle);
    });
  }
}